<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>首页--layui后台管理模板</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<!--<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">-->
		<link rel="stylesheet" href="../layui/css/layui.css" />
	</head>

	<body class="childrenBody">

		<div id="main" style="height: 500px;"></div>
		<!--<div class="layui-container">
			常规布局（以中型屏幕桌面为例）：
			<div class="layui-row" id="main" style="height: 500px;">
			</div>

		</div>-->

		<script type="text/javascript" src="../layui/layui.js"></script>
		<script>
			layui.use('echarts', function() {

				// 基于准备好的dom，初始化echarts实例
				var echarts = layui.echarts;
				var myChart = echarts.init(document.getElementById('main'));

				// 指定图表的配置项和数据
				/*var option = {
					title: {
						text: 'ECharts 入门示例'
					},
					tooltip: {},
					legend: {
						data: ['销量']
					},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				};*/

				var option = {
					color: ['#3398DB'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '直接访问',
						type: 'bar',
						barWidth: '60%',
						data: [10, 52, 200, 334, 390, 330, 220]
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				window.addEventListener("resize", function() {
					myChart.resize();
				});
			})
		</script>
	</body>

</html>